<template>
    <div>
       <div class="big" @click.stop="bigClick">
            <div class="small" @click.stop="smallClick">
                <a href="###" @click.stop.prevent="aClick">标签a</a>
            </div>
       </div>
       <hr>
       <!-- 指触发一次 -->
        <button @click.once="btnClick">once！！！</button>
        <hr>
        <input type="text" @keyup.enter="hdClick" v-model="textVal">
    </div>
</template>

<script>
export default {
    data () {
        return {
            textVal:''
        }
    },
    methods:{
        bigClick(){
            console.log('点击大盒子')
        },
        smallClick(){
            console.log('点击小盒子')
        },
        aClick(){
            console.log('点击a标签')
        },
        btnClick(){
            console.log('就一次！！！')
        },
        hdClick(){
            console.log(this.textVal)
        }
    }
}
</script>
 
<style lang="less" scoped>
    .big{
        width: 300px;
        height: 300px;
        background-color: skyblue;
        .small{
            width: 200px;
            height: 200px;
            background-color: tan;
        }
    }
</style>